<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
</head>
<body>
<div id="app">

    <div style="border: 0px solid  red;display: flex;align-items: center">
        <span style="margin-right: 10px">目标:</span>
        <el-input type="text" v-model="url" style="line-height: 25px;flex: 1;margin: 0 10px 0 0"></el-input>
        <el-button type="primary" @click="startTest">开始检测</el-button>
    </div>
    <div style="display: flex;align-items: center;margin-top: 10px">
        <span style="margin-right: 10px">请求方法:</span>
        <el-select style="flex: 1" v-model="methodType">
            <el-option value="get" label="GET"></el-option>
            <el-option value="post" label="POST"></el-option>
        </el-select>
    </div>
    <div>
        <span style="margin-right: 10px">注入方式:</span>
        <el-radio v-model="injectType" label="1">联合注入</el-radio>
        <el-radio v-model="injectType" label="2">盲注</el-radio>
        <el-radio v-model="injectType" label="3">报错注入</el-radio>
        <el-radio v-model="injectType" label="4">延时注入</el-radio>
    </div>
    <div style="display: flex;align-items: center;margin-top: 10px">
        <span style="margin-right: 10px">注入检测参数构造:</span>
        <el-radio v-model="checkType" label="auto">自动选择语句注入</el-radio>
        <el-radio v-model="checkType" label="manual">手动注入</el-radio>
        <el-input v-if="checkType=='manual'" type="text" v-model="checkText" style="line-height: 25px;flex: 1"/>
    </div>
    <div style="display: flex;align-items: center;margin-top: 10px">
        <div style="flex: 1;display: flex;align-items: center;">
            <span style="margin-right: 10px">伪装请求头:</span>
            <el-radio v-model="checkHeadType" label="auto">自动选择</el-radio>
            <el-radio v-model="checkHeadType" label="manual">手动注入</el-radio>
            <el-input v-if="checkHeadType=='manual'" type="text" v-model="checkHeadText"
                      style="line-height: 25px;flex: 1"/>
            <el-input type="text" v-model="url" style="line-height: 25px;flex: 1"/>
        </div>
    </div>
    <!--基础配置-->
    <div style="border: 0px  solid  gainsboro;margin: 10px 0">
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="基础配置" name="first">
                <div style="display: flex;flex-wrap: wrap">
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px">数据库:</span>
                        <el-select style="flex: 0 0 auto" v-model="databaseType">
                            <el-option value="" label="自动识别"></el-option>
                            <el-option value="2" label="MySQL"></el-option>
                            <el-option value="3" label="PostgreSQL"></el-option>
                            <el-option value="4" label="MSSQL"></el-option>
                        </el-select>
                    </div>
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px">网页编码:</span>
                        <el-select style="flex: 0 0 auto" v-model="charsetType">
                            <el-option value="" label="自动识别"></el-option>
                            <el-option value="2" label="UTF-8"></el-option>
                            <el-option value="3" label="GB2312"></el-option>
                            <el-option value="4" label="GBK"></el-option>
                            <el-option value="5" label="GB18030"></el-option>
                        </el-select>
                    </div>
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px">线程:</span>
                        <el-select style="flex: 0 0 auto" v-model="threadType">
                            <el-option value="" label="自动"></el-option>
                            <el-option value="2" label="5"></el-option>
                            <el-option value="3" label="10"></el-option>
                            <el-option value="4" label="20"></el-option>
                            <el-option value="5" label="30"></el-option>
                        </el-select>
                    </div>
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px">重试次数:</span>
                        <el-select style="flex: 0 0 auto" v-model="retryType">
                            <el-option value="" label="自动"></el-option>
                            <el-option value="2" label="1"></el-option>
                            <el-option value="3" label="3"></el-option>
                            <el-option value="4" label="6"></el-option>
                            <el-option value="5" label="6"></el-option>
                        </el-select>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="代理配置" name="second">
                <div style="display: flex;flex-wrap: wrap">
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px">代理协议:</span>
                        <el-select style="flex: 0 0 auto" v-model="proxyType">
                            <el-option value="" label="自动"></el-option>
                            <el-option value="2" label="Vmess"></el-option>
                            <el-option value="3" label="shadowscokets"></el-option>
                            <el-option value="4" label="scoket5"></el-option>
                        </el-select>
                    </div>
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px;flex: 0 0 auto">地址:</span>
                        <el-input style="max-width: 200px;flex: 0 0 auto" v-model="proxyUrl"></el-input>

                    </div>
                    <div style="flex: 0 0 50%;display: flex;align-items: center;margin-top: 10px">
                        <span style="margin-right: 10px;flex: 0 0 auto">端口:</span>
                        <el-input style="max-width: 200px;flex: 0 0 auto" v-model="proxyPort"></el-input>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <div style="display: flex;flex-direction: column">
        <span>注入结果:</span>
        <div style="margin-top: 10px;background: black;color: green">
            <el-input style="" rows="12" v-model="result" type="textarea" id="textarea"></el-input>
        </div>
    </div>
</div>
</body>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css"/>
<!-- Import Vue 3 -->
<script src="//unpkg.com/vue@3"></script>
<!-- Import component library -->
<script src="//unpkg.com/element-plus"></script>
</html>
<script>
    const {createApp} = Vue
    const app = createApp({
        data() {
            return {
                proxyUrl: "",
                proxyPort: "",
                proxyType: "",
                retryType: "",
                threadType: "",
                charsetType: "",
                databaseType: "",
                activeName: "first",
                // 注入类型
                injectType: "1",

                checkType: "auto",
                // 注入检测参数构造
                checkText: "",

                // 注入请求头构造
                checkHeadType: "auto",
                checkHeadText: "",

                methodType: "get",
                url: "http://127.0.0.1/Less-1/",
                result: "",
            }
        },
        created() {
            window.startTest = this.startTest;
            window.callFromPython = this.callFromPython
            window.setLog = this.setLog
        },
        mounted() {

        },
        methods: {
            setLog(log) {
                this.result += log + "\n"
                this.$nextTick(() => {
                    setTimeout(() => {
                        const textarea = document.getElementById('textarea');
                        textarea.scrollTop = textarea.scrollHeight;
                    }, 13)
                })

            },
            callFromPython() {
                console.log('>>>>>>>>>>call')
            },
            startTest() {

                window.pywebview.api.hanlderClick(this.url, this.injectType, this.checkType, this.checkText, this.checkHeadType, this.checkHeadText, this.methodType).then((res) => {
                    console.log('>>>>>>>>res', res)
                })

            }
        }
    })
    app.use(ElementPlus);
    app.mount('#app')
</script>
<style>
    textarea {
        background: black !important;
        color: lime !important;
    }
</style>